<template>
  <div class="body">
    <CircleNav></CircleNav>
    <van-tabs background="#fff" sticky offset-top="46px">
      <van-tab title="宠物圈" name="a">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <img class="addtiezi" @click="$router.push(`/publish/${u_id}`)" src="../../assets/tabbar/add.png" />
            <div class="content" v-for="item in blogs">
              <div class="content_up">
                <div class="up_left">
                  <img :src="UPL + `${item.u_img}`" alt="" style="" />
                  <span>{{ item.u_name }}</span>
                </div>
                <div class="up_right">
                  <span>关注</span>
                  <van-icon name="eye-o" color="pink" size="25" />
                  <span>520</span>
                  <van-icon name="share-o" />
                </div>
              </div>
              <div class="content_center" @click="$router.push(
                `/circle-comment/${item.b_id}/${item.u_name}/${u_id}/${item.u_img}`
              )
                ">
                <p>{{ item.b_content }}</p>
                <div class="image">
                  <img :src="UPL + `${item.b_img}`" />
                </div>
              </div>
              <div class="content_down">
                <div class="down_left">
                  <van-icon name="good-job-o" /><span>250</span>
                  <van-icon name="edit" /><span>233</span>
                </div>
                <div class="down_right">
                  <van-icon name="chat-o" size="25px" />
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="视频" name="b">
        <div class="content-video" v-for="item in blogs">
          <div class="content_up">
            <div class="up_left">
              <img src="../../assets/1.jpg" alt="" style="" />
              <span>{{ item.u_name }}</span>
            </div>
            <div class="up_right">
              <div class="look">关注</div>
            </div>
          </div>
          <div class="content_center">
            <div class="video">
              <!-- <img src="../../assets/2.jpg" alt="" /> -->
              <video src="../../assets/video/11.mp4" controls></video>
            </div>
          </div>
          <div class="content_down">
            <div class="down_left">
              <span>3692热度</span>
            </div>
            <div class="down_right">
              <div><van-icon name="like-o" color="red" /><span>250</span></div>
              <div><van-icon name="chat-o" /><span>233</span></div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="宠物公益" name="c">
        <div class="content-good" style="background-color: #fff">
          <div class="bgtext">
            <img class="bg" src="../../assets/static/lunbo3.png" alt="" />
          </div>
          <div class="card">
            <div class="person">
              <div class="person_up">
                <div class="imgname">
                  <img src="../../assets/static/lunbo1.png" alt="" />
                  <span>吃成一个大包子</span>
                </div>
                <span class="goodname">工艺小能手</span>
              </div>
              <div class="mes">
                <div>
                  <p>参与捐助</p>
                  <p style="color: orange">6</p>
                </div>
                <div>
                  <p>参与捐助</p>
                  <p style="color: orange">6</p>
                </div>
                <div>
                  <p>参与捐助</p>
                  <p style="color: orange">6</p>
                </div>
              </div>
            </div>
          </div>
          <div class="jinji">
            <span class="juan"><span style="color: red">紧急</span>捐助</span>
            <div>
              <span>给小胖筹集医药费</span>
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="list">
            <div class="nav">
              <span style="font-size: 18px">全部项目</span>
              <div>
                <span style="color: #999">更多</span>
                <van-icon name="arrow" color="#999" />
              </div>
            </div>
            <div class="list-content" v-for="item in 10">
              <div class="img">
                <img src="../../assets/static/gogogo.png" alt="" />
              </div>
              <div class="txt">
                <span style="color: #333">苏州市宠胖胖的爱心助力任务</span>
                <span>1kg的口粮可以让重型犬一个星期不会饿肚子</span>
                <div>
                  <span style="color: orangered">公益价:￥4.4元</span>
                  <button>我要捐赠</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <div style="height: 50px"></div>
  </div>
</template>

<script setup>
import { circle } from "@/http/apis/circleApi";
import { ref, onMounted, reactive } from "vue";
import { useStore } from "vuex";
import baseURL from "@/http/baseURL";
import router from "@/router";

const blogs = reactive([]);
const store1 = useStore().state.user;
const u_id = store1.u_id;
const UPL = baseURL.UPL + "/";

//查询所有点赞
function queryAllHelp() {
  let params = { b_id: 1 };
  circle.queryAllHelp(params).then((res) => { });
}
const refreshing = ref(false);
function onRefresh() {
  // 下拉刷新被触发时执行  自动freshing=true
  // 发请求, 加载当前类别下的首页数据
  let nextPage = Math.floor(blogs.length / 3) + 1;
  let params = { pno: nextPage, pagesize: 3 };
  circle.queryALL(params).then((res) => {
    refreshing.value = false;
    // 替换掉当前列表
    blogs.splice(0, blogs.length, ...res.data.data.blogs);
  });
}
// 处理触底事件的监听
const loading = ref(false);
const finished = ref(false);
function onLoad() {
  // 当触底后自动调用onLoad
  // onLoad执行时, vant会自动将loading改为true
  // console.log("到底了...");
  // 发送请求, 加载下一页数据   下一页数据的page=?  blogs.length
  aaa();
}
// 查询所有帖子
function aaa() {
  let nextPage = Math.floor(blogs.length / 3) + 1; // 下一页页码
  let pagesize = 3; // 每页多少条
  let params = { pno: nextPage, pagesize };
  circle.queryALL(params).then((res) => {
    // 删除图片的&生成新的数组加入blogs
    blogs.push(...res.data.data.blogs);
    blogs.forEach((v) => {
      v.b_img = v.b_img.split("&")[0];
    });
    // console.log("总帖子", blogs);
    loading.value = false;

    // 判断当前列表是否已经到底
    if (res.data.data.total == blogs.length) {
      finished.value = true;
    }
  });
}
onMounted(() => {
  // console.log(u_id);

  // 查询所有点赞
  queryAllHelp();
});
</script>

<style lang="scss" scoped>
.body {
  background-color: #fff;
}

.content {
  //帖子内容
  padding: 0 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #eee;
  margin: 10px 10px;
  box-shadow: 2px 2px 5px #ddd;
  color: #646464;

  // padding-bottom: 60px;
  .content_up {
    //帖子上部分
    display: flex;
    justify-content: space-between;
    align-items: center;

    .up_left {
      padding: 5px;
      height: 50px;
      display: flex;

      img {
        border-radius: 50px;
        margin-left: -10px;
        width: 40px;
        height: 40px;
      }

      span {
        line-height: 50px;
        padding: 0 10px;
      }
    }

    .up_right {
      span {
        padding: 0 10px;
      }

      margin-right: 10px;
    }

    border-bottom: 1px solid #eee;
  }

  .content_center {
    padding: 0 10px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;

    //帖子主体内容
    .image {
      display: flex;
      width: 100%;
      overflow: hidden;
      // padding: 0 10px;

      img {
        border: 1px solid #eee;
        margin: 10px 5px;
        width: 100px;
        height: 100px;
        border-radius: 15px;

        &:nth-child(n) {
          margin-left: 0;
        }
      }
    }
  }

  .content_down {
    //帖子下部
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #eee;

    .down_left {
      margin: 0 15px;
      padding: 10px 0;

      span {
        padding: 0 10px;
      }
    }

    .down_right {
      margin: 0 15px;
      padding: 10px 0;
    }
  }
}

.addtiezi {
  position: fixed;
  width: 50px;
  height: 50px;
  right: 0;
  bottom: 15%;
}

//视频页面
.content-video {
  //帖子内容
  padding: 0 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #eee;
  margin: 10px 0;
  box-shadow: 2px 2px 5px #ddd;
  color: #646464;
  // padding-bottom: 60px;

  .content_up {
    //帖子上部分
    display: flex;
    justify-content: space-between;
    align-items: center;

    .up_left {
      padding: 5px;
      height: 50px;
      display: flex;

      img {
        border-radius: 50px;
        margin-left: -10px;
        width: 40px;
        height: 40px;
      }

      span {
        line-height: 50px;
        padding: 0 10px;
      }
    }

    .up_right {
      span {
        padding: 0 10px;
      }

      .look {
        padding: 5px 10px;
        border-radius: 12px;
        background-color: orange;
        color: white;

        &:active {
          opacity: 0.8;
        }
      }

      margin-right: 10px;
    }

    border-bottom: 1px solid #eee;
  }

  .content_center {

    //帖子主体内容
    .video {
      display: flex;
      padding: 0 10px;

      video {
        border: 1px solid #eee;
        margin: 10px 10px;
        width: 100%;
        height: 300rpx;
        border-radius: 15px;

        &:nth-child(n) {
          margin-left: 0;
        }
      }
    }
  }

  .content_down {
    //帖子下部
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #eee;

    .down_left {
      margin: 0 15px;
      padding: 5px 0;

      span {
        font-size: 14px;
      }
    }

    .down_right {
      margin: 0 15px;
      padding: 10px 0;
      display: flex;

      div {
        padding: 0 5px;
      }
    }
  }
}

.content-good {
  width: 100vw;

  img {
    width: 100%;
  }

  .card {
    position: relative;
    bottom: 25px;

    .person {
      background-color: white;
      border-radius: 10px;
      width: 90%;
      margin: 0 auto;
      box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);

      .person_up {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;

        .imgname {
          display: flex;
          align-items: center;

          img {
            width: 35px;
            height: 35px;
            border-radius: 20px;
            margin-right: 5px;
          }
        }

        .goodname {
          border: 1px solid orangered;
          border-radius: 5px;
          padding: 3px;
        }
      }

      .mes {
        display: flex;
        justify-content: space-between;
        padding: 10px 15px;
        text-align: center;
      }
    }
  }

  .jinji {
    box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);
    background-color: white;
    width: 90%;
    margin: 0 auto;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    padding: 5px 0;

    .juan {
      padding-left: 10px;
    }

    div {
      padding-right: 5px;
      color: #999;
    }
  }

  .list {
    margin-top: 35px;

    .nav {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      padding: 0 15px;
    }

    .list-content {
      display: flex;
      border-bottom: 1px solid #999;
      margin-bottom: 15px;
      padding-bottom: 10px;

      img {
        width: 180px;
        height: 90px;
        object-fit: cover;
        flex: 1;
        border-radius: 5px;
        margin: 0 10px;
      }

      .txt {
        font-size: 14px;
        display: flex;
        flex-direction: column;

        div {
          display: flex;
          justify-content: space-between;

          button {
            border: 0;
            background-color: orangered;
            color: white;
            border-radius: 5px;
            margin-right: 10px;
            padding: 0 5px;

            &:active {
              opacity: 0.5;
            }
          }
        }
      }
    }
  }
}
</style>
